<template>
  <div class="pos">
      <el-row>
        <el-col :span="7" class="pos-order" id="orderheiht">
          <el-tabs >
            <el-tab-pane label="点餐" >
              <el-table  :data='tableData' border style='width:100%'>
                  <el-table-column prop="goodsName" label="商品"></el-table-column>
                  <el-table-column prop="count" label="量" width="50"></el-table-column>
                  <el-table-column prop="price" label="金额" width="70"></el-table-column>
                  <el-table-column label="操作" width="100" fixed="right">
                    <template   slot-scope='scops'>
                        <el-button type="text" size='small' @click="deSingleGoods(scops.row)">删除</el-button>
                        <el-button type="text" size='small' @click="addOrderList(scops.row)">增加</el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <div class="totalDiv">
                <small>数量：</small>{{totalCount}} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<small>金额：</small>{{totalMoney}} 
              </div>
              <div class="div-btn">
                <el-button type="warning"> 挂单</el-button>
                <el-button type="danger" @click="delAllGoods()"> 删除</el-button>
                <el-button type="success" @click="checkout()"> 结账</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="挂单">
              挂单  
            </el-tab-pane>
            <el-tab-pane label="外卖">
              外卖
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="17">
          <div class="often-goods">
            <div class="title">常用商品</div>
            <div class="often-goods-list">
              <ul>
                <li v-for="item in oftenGoods" :key="item.id" @click='addOrderList(item)'>
                  <span>{{item.goodsName}}</span>
                  <span class="o-price">￥{{item.price}}元</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="goods-type">
            <el-tabs>
              <el-tab-pane label='汉堡'>
              <ul class='cookList'>
                <li v-for="goods in type0Goods" :key='goods.id' @click='addOrderList(goods)'>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
              </el-tab-pane>
              <el-tab-pane label='小食'>
                <ul class='cookList'>
                <li v-for="goods in type1Goods" :key='goods.id' @click='addOrderList(goods)'>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
              </el-tab-pane>
              <el-tab-pane label='饮料'>
                <ul class='cookList'>
                <li v-for="goods in type2Goods" :key='goods.id' @click='addOrderList(goods)'>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
              </el-tab-pane>
              <el-tab-pane label='套餐'>
                <ul class='cookList'>
                <li v-for="goods in type3Goods" :key='goods.id' @click='addOrderList(goods)'>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                </li>
              </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0
    };
  },
  mounted() {
    var orderheiht = document.body.clientHeight;
    console.log(orderheiht);
    document.getElementById("orderheiht").style.height = orderheiht + "px";
    let c = document.getElementsByClassName('el-tabs__nav');
    console.log(c)
    for(var i =0;i<c.length;i++){
      console.log(c[i])
      c[i].style.marginLeft=10+'px';
    };
  },
  created() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        console.log(response);
        this.oftenGoods = response.data;
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
    axios.get("http://jspang.com/DemoApi/typeGoods.php").then(response => {
      this.type0Goods = response.data[0];
      this.type1Goods = response.data[1];
      this.type2Goods = response.data[2];
      this.type3Goods = response.data[3];
    });
  },
  methods: {
    addOrderList(goods) {
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }
      //根据判断的值编写义务的逻辑
      if (isHave) {
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      this.getAllMoney()
    },
    deSingleGoods(goods) {
      this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
      this.getAllMoney();
    },
    getAllMoney() {
      this.totalMoney = 0;
      this.totalCount = 0;
      if (this.tableData) {
        this.tableData.forEach(element => {
          this.totalCount += element.count;

          this.totalMoney = this.totalMoney + element.price * element.count;
        });
      }
    },
    delAllGoods(){
      this.tableData =[]
      this.totalCount=0;
      this.totalMoney=0;
    },
    checkout(){
      if(this.totalCount!=0){
        this.tableData =[];
        this.totalCount =0;
        this.totalMoney = 0;
        this.$message({
          message:'结账成功，感谢你又为店里出了一份力！',
          type:'success'
        });
      }else{
        this.$message.error('不能空结。老板了解你急切的心情！');
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pos {
  text-align: center;
}
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0c0da;
  height: 100%;
}
.div-btn {
  margin-top: 30px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}
.often-goods-list {
  overflow: hidden;
}
.often-goods-list ul li {
  list-style: none;
  float: left;

  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.o-price {
  color: #5887ff;
}
.goods-type {
  clear: both;
  margin-top: 20px;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.totalDiv {
  /* margin-top:20px; */
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #cccc;
}
.el-tabs__nav{
  margin-left:10px !important;
}
</style>
